<template>
  <div>
    <Tabs value="name1">
      <TabPane label="主界面" name="name1">
        <Row>
          <p>1</p>
          <Input
            v-model="value1"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(1)">修改</Button>
          <br />
          <br />
        </Row>
        <Row>
          <p>2</p>
          <Input
            v-model="value2"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(2)">修改</Button>
          <br />
          <br />
        </Row>
        <Row>
          <p>3</p>
          <Input
            v-model="value3"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(3)">修改</Button>
          <br />
          <br />
        </Row>
        <Row>
          <p>4</p>
          <Input
            v-model="value4"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(4)">修改</Button>
          <br />
          <br />
        </Row>
        <Row>
          <p>5</p>
          <Input
            v-model="value5"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(5)">修改</Button>
          <br />
          <br />
        </Row>
        <Row>
          <p>6</p>
          <Input
            v-model="value6"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(6)">修改</Button>
          <br />
          <br />
        </Row>
        <Row>
          <p>7</p>
          <Input
            v-model="value7"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(7)">修改</Button>
          <br />
          <br />
        </Row>
        <Row>
          <p>8</p>
          <Input
            v-model="value8"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(8)">修改</Button>
          <br />
          <br />
        </Row>
        <Row>
          <p>9</p>
          <Input
            v-model="value9"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(9)">修改</Button>
          <br />
          <br />
        </Row>
        <Row>
          <p>0</p>
          <Input
            v-model="value0"
            placeholder="Enter something..."
            style="width: 300px"
          />
          <Button type="primary" @click="clip(0)">修改</Button>
          <br />
          <br />
        </Row>
      </TabPane>

      <TabPane label="使用说明" name="name2">
        <div style="background: #eee; padding: 20px">
          <Card :bordered="false">
            <p>
              1.使用{{ ctrl }}+shift+数字来调用内容至剪贴板(需要{{
                ctrl
              }}+v来黏贴)
            </p>
            <p>2.使用{{ ctrl }}+alt+数字来将内容保存至剪贴板</p>
            <p>3.点击修改来修改程序默认获取的剪贴板内容</p>
          </Card>
        </div>
        <div style="background: #eee; padding: 20px">
          <Card :bordered="false">
            <p>作者：吉法师</p>
            <p>QQ:765715928</p>
          </Card>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
const electron = require("electron");
const clipboard = electron.clipboard;
const remote = electron.remote;
//获取全局变量
const shortcut = remote.getGlobal("shortcut");
const store = remote.getGlobal("store");

const ipc = electron.ipcRenderer;
const os = require("os");
let ctrl = "";
const fs = require("fs");

if (os.platform() == "darwin") {
  ctrl = "command";
} else {
  ctrl = "ctrl";
}
export default {
  data() {
    return {
      value1: shortcut["cs1"],
      value2: shortcut["cs2"],
      value3: shortcut["cs3"],
      value4: shortcut["cs4"],
      value5: shortcut["cs5"],
      value6: shortcut["cs6"],
      value7: shortcut["cs7"],
      value8: shortcut["cs8"],
      value9: shortcut["cs9"],
      value0: shortcut["cs0"],
      ctrl: ctrl,
      that: "",
      message: this.$Message,
      notice: this.$Notice,
      shortcut: shortcut,
    };
  },
  methods: {
    clip(arg) {
      //修改配置
      let valueTemp = "value" + arg;
      let shortcutTemp = "cs" + arg;
      // this.value = clipboard.readText();

      shortcut[shortcutTemp] = this[valueTemp];

      //更新
      ipc.send("write", shortcut);
      this.$Message.info("更新成功");
    },
    mesgNotice(msg) {
      if (window.Notification && Notification.permission !== "denied") {
        Notification.requestPermission(function (status) {
          var notice_ = new Notification("MyClip", { body: msg });
          notice_.onclick = function () {
            //单击消息提示框，进入浏览器页面
            window.focus();
          };
        });
      }
    },
  },
  created() {


    ipc.on("cs1", () => {
      clipboard.writeText(this.shortcut["cs1"]);
      this.mesgNotice(`提取1号配置成功`);
    });
    ipc.on("cs2", () => {
      clipboard.writeText(this.shortcut["cs2"]);
      this.mesgNotice(`提取2号配置成功`);
    });
    ipc.on("cs3", () => {
      clipboard.writeText(this.shortcut["cs3"]);
      this.mesgNotice(`提取3号配置成功`);
    });
    ipc.on("cs4", () => {
      clipboard.writeText(this.shortcut["cs4"]);
      this.mesgNotice(`提取4号配置成功`);
    });
    ipc.on("cs5", () => {
      clipboard.writeText(this.shortcut["cs5"]);
      this.mesgNotice(`提取5号配置成功`);
    });
    ipc.on("cs6", () => {
      clipboard.writeText(this.shortcut["cs6"]);
      this.mesgNotice(`提取6号配置成功`);
    });
    ipc.on("cs7", () => {
      clipboard.writeText(this.shortcut["cs7"]);
      this.mesgNotice(`提取7号配置成功`);
    });
    ipc.on("cs8", () => {
      clipboard.writeText(this.shortcut["cs8"]);
      this.mesgNotice(`提取8号配置成功`);
    });
    ipc.on("cs9", () => {
      clipboard.writeText(this.shortcut["cs9"]);
      this.mesgNotice(`提取9号配置成功`);
    });
    ipc.on("cs0", () => {
      clipboard.writeText(this.shortcut["cs0"]);
      this.mesgNotice(`提取0号配置成功`);
    });

    ipc.on("alt0", () => {
      this.value0 = clipboard.readText();
      shortcut["cs0"] = this.value0;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存0号配置成功!");
    });
    ipc.on("alt1", () => {
      this.value1 = clipboard.readText();
      shortcut["cs1"] = this.value1;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存1号配置成功!");
    });
    ipc.on("alt2", () => {
      this.value2 = clipboard.readText();
      shortcut["cs2"] = this.value2;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存2号配置成功!");
    });
    ipc.on("alt3", () => {
      this.value3 = clipboard.readText();
      shortcut["cs3"] = this.value3;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存3号配置成功!");
    });
    ipc.on("alt4", () => {
      this.value4 = clipboard.readText();
      shortcut["cs4"] = this.value4;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存4号配置成功!");
    });
    ipc.on("alt5", () => {
      this.value5 = clipboard.readText();
      shortcut["cs5"] = this.value5;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存5号配置成功!");
    });
    ipc.on("alt6", () => {
      this.value6 = clipboard.readText();
      shortcut["cs6"] = this.value6;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存6号配置成功!");
    });
    ipc.on("alt7", () => {
      this.value7 = clipboard.readText();
      shortcut["cs7"] = this.value7;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存7号配置成功!");
    });
    ipc.on("alt8", () => {
      this.value8 = clipboard.readText();
      shortcut["cs8"] = this.value8;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存8号配置成功!");
    });
    ipc.on("alt9", () => {
      this.value9 = clipboard.readText();
      shortcut["cs9"] = this.value9;
      store.set("config", JSON.stringify(shortcut));
      this.mesgNotice("保存9号配置成功!");
    });
  },
};
</script>

<style>
</style>